<script setup lang="ts">
import Header from "./views/1_header/header.vue";
import SearchView from "./views/2_search/search-view.vue";
import logoView from "./views/3_logo/logo-view.vue";
import constants_one from "./views/4_constants/constants_one.vue";
import business from "./views/5_business/business.vue";
import demand from "./views/6_demand/demand.vue";
import constants_two from "./views/7_constants_two/constants_two.vue";
import Footer from "./views/8_footer/footer.vue";
</script>

<template>
  <div class="container">
    <div class="head-container"><Header /></div>
    <div class="search-container"><SearchView /></div>
    <div class="logo-container"><logoView /></div>
    <div class="constant1-container"><constants_one /></div>
    <div class="business1-container"><business /></div>
    <div class="demand-container"><demand /></div>
    <div class="constant2-container"><constants_two /></div>
    <div class="footer-container"><Footer /></div>
  </div>
</template>

<style scoped lang="scss">
$container-min-width: 1920px;

.container {
  width: 100%;
  height: 100vh;
  position: relative;
  display: flex;
  justify-content: flex-start; // 子元素从顶部开始排列
  flex-direction: column;
  align-items: center;
  overflow-y: auto; // 允许垂直滚动
}
.head-container,
.search-container,
.logo-container,
.constant1-container,
.business1-container,
.demand-container,
.constant2-container,
.footer-container {
  position: relative;
  width: $container-min-width;
  overflow: hidden;
  display: flex;
  flex-shrink: 0; // 禁用子项收缩 关键修复 👈
}

.head-container {
  height: 40px;
}
.search-container {
  height: 174px;
}
.logo-container {
  height: 537px;
}
.constant1-container {
  height: 2275px;
}
.business1-container {
  height: 666px;
}
.demand-container {
  height: 648px;
}
.constant2-container {
  height: 2274px;
}
.footer-container {
  height: 212.07px;
}
</style>
